<template>
  <div>
    <van-nav-bar placeholder fixed title="订单页面" left-text="" left-arrow @click-left="onClickLeft" />
    <van-popup duration="0.2" position="right" v-model="showAddress"
      style="background-color: white;width: 100vw;height: 100vh;border: 0;border-top: 1px solid white;overflow-y:hidden;">
      <van-nav-bar left-arrow title="切换地址" :border="false" @click-left="()=>{showAddress = !showAddress}" />
      <van-address-list v-model="chosenAddressId" :list="Addresslist" @add="()=>{showAddress = !showAddress}"
        add-button-text="确认" default-tag-text="默认" />
    </van-popup>
    <van-contact-card :name="editress[0].name" :tel="editress[0].address" type="edit"
      @click="showAddress = !showAddress" />
    <van-card v-for="(item, index) in goods_order" :key="index" :num="item.num" :price="item.price" :title="item.name"
      :thumb="item.img" />
    <van-cell title="优惠" is-link arrow-direction="down" value="暂无优惠券" />
    <van-radio-group v-model="radio">
      <van-cell-group>
        <van-cell title="支付宝" clickable @click="radio = 1">
          <template #right-icon>
            <van-radio :name="radiow" />
          </template>
        </van-cell>
        <van-cell title="微信" clickable @click="radio = 1">
          <template #right-icon>
            <van-radio :name="radioz" />
          </template>
        </van-cell>
      </van-cell-group>
    </van-radio-group>
    <van-submit-bar @submit="fukuan" :price="zongprice*100" button-text="提交订单" />
  </div>
</template>

<script>
  import router from '@/router'
  import {
    mapState
  } from 'vuex'
  export default {
    name: 'orDer',
    data() {
      return {
        userNick: localStorage.getItem('userToken') || '',
        radio: 1,
        radiow: 1,
        radioz: 2,
        showAddress: false,
        chosenAddressId: '1',
        Addresslist: [{
            id: '1',
            name: '张三',
            tel: '13000000000',
            address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
            isDefault: true
          },
          {
            id: '2',
            name: '李四',
            tel: '1310000000',
            address: '浙江省杭州市拱墅区莫干山路 50 号'
          }
        ]
      }
    },
    methods: {
      onClickLeft() {
        router.go(-1)
      },
      async fukuan() {
        const data = {}
        data.type = this.radio // 支付类型 1 和 2
        data.status = 0 // 支付状态0 和 1
        data.price = this.zongprice
        data.nick = this.userNick
        data.data = this.goods_order
        const res = await this.$api.homeData.goods_Order(data, 'post')
        if (res.status === 201) {
          window.open(res.data)
          this.$dialog.confirm({
              message: '点击确认进行查询支付结果！\n取消则返回主页'
            })
            .then(async () => {
              const ress = await this.$api.homeData.getactget(res.out_trade_no)
              if (ress.status === '1') {
                router.push('/Payment')
              }
              console.log(ress)
            })
            .catch(() => {
              router.push('/Home')
            })
        }
      }
    },
    created() {
      this.editress = this.Addresslist.filter(x => x.id === '1')
      if (this.userNick === '') {
        router.push('/Login')
        this.$toast('这就为您跳转登录哦')
      }
      if (this.goods_order.length === 0) {
        router.push('/Home')
      }
    },
    watch: {
      chosenAddressId(n) {
        this.editress = this.Addresslist.filter(x => x.id === this.chosenAddressId)
      }
    },
    computed: {
      ...mapState(['goods_order']),
      zongprice() {
        let q = 0
        for (const i in this.goods_order) {
          q += this.goods_order[i].price
        }
        return q
      }
    }
  }
</script>

<style>
</style>
